<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>黑马页面</title>
    <!-- 引入swiper的css文件 -->
    <link rel="stylesheet" href="./css/swiper.min.css">
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./css/base.css">
</head>

<body>
    <section class="warrp">
        <header class="header">黑马页面</header>
        <nav class="nav">
            <a href="#">
                <!-- 这里我加了一个小盒子，目的是通过溢出隐藏将图片中的杂线遮起来 -->
                <i><img src="./images/mode.png" alt=""></i>

                <span>HR面试</span>
            </a>
            <a href="#">
                <i> <img src="./images/pen.png" alt=""></i>

                <span>笔试</span>
            </a>
            <a href="#">
                <i> <img src="./images/tecolog.png" alt=""></i>

                <span>技术面试</span>
            </a>
            <a href="#">
                <i><img src="./images/tecolog2.png" alt=""></i>

                <span>模拟面试</span>
            </a>
            <a href="#">
                <i><img src="./images/tecolog3.png" alt=""></i>

                <span>面试技巧</span>
            </a>
            <a href="#">
                <i><img src="./images/text.png" alt=""></i>

                <span>薪资查询</span>
            </a>
        </nav>
        <!-- go模块 -->
        <section class="go">
            <img src="./images/go.png" alt="">
        </section>
    </section>
    <!-- 就业指导 -->
    <section class="content">
        <div class="con-hd">
            <h4>就业指导</h4>
            <a href="#">更多</a>
        </div>
        <!-- 自已写了一个动画 -->
        <div class="con-bd">
            <div class="picmove">
                <div class="rotate1"></div>
                <div class="rotate2"></div>
                <div class="rotate3"></div>
                <div class="rotate4"></div>
                <div class="rotate5"></div>
                <div class="rotate6"></div>
            </div>
        </div>
        <!-- 自已写了一个点击轮播图 -->
        <div class="banner">
            <div class="pro"></div>
            <div class="imgpic">
                <img src="./images/tab_list1.png" alt="">
            </div>
            <div class="next"></div>
        </div>
        <script>
            const pro = document.querySelector('.banner .pro')
            const next = document.querySelector('.banner .next')
            const img = document.querySelector('.banner .imgpic img')
            let i = 0
            next.addEventListener('click', function () {
                i++
                if (i > 7) {
                    i = 1
                }
                img.src = `./images/tab_list${i}.png `
            })
            pro.addEventListener('click', function () {
                i--
                if (i < 1) {
                    i = 7
                }
                img.src = `./images/tab_list${i}.png `
            })
        </script>
        </div>
        <!-- 下面调用swiper插件制作轮播图
                                            1.打开官网：https://www.swiper.com.cn/
                                            2.下载需要的css和js文件，存到本地编译器
                                            3.在官网找到与需求类似的案例，点击“在新窗口打开”，再右键查看原代码，复制该案例html/css/js
                                            4.根据需要修改模块-->
        <!-- Swiper -->
        <div class="get_job_focus">
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <a href="#"><img src="./images/cenfang1.jpg" alt=""></a>
                    </div>
                    <div class="swiper-slide">
                        <a href="#"><img src="./images/fresh_goods_1.jpg" alt=""></a>
                    </div>
                    <div class="swiper-slide"><a href="#">
                            <img src="./images/fresh_goods_2.jpg" alt="">
                        </a></div>
                    <div class="swiper-slide">
                        <a href="#">
                            <img src="./images/fresh_goods_4.jpg" alt="">
                        </a>
                    </div>
                    <div class="swiper-slide">
                        <a href="#">
                            <img src="./images/fresh_goods_5.jpg" alt="">
                        </a>
                    </div>
                    <div class="swiper-slide">
                        <a href="#">
                            <img src="./images/fresh_goods_2.jpg" alt="">
                        </a>
                    </div>
                    <div class="swiper-slide">
                        <a href="#">
                            <img src="./images/fresh_goods_6.jpg" alt="">
                        </a>
                    </div>
                    <div class="swiper-slide">
                        <a href="#">
                            <img src="./images/fresh_goods_8.jpg" alt="">
                        </a>
                    </div>
                    <div class="swiper-slide">
                        <a href="#">
                            <img src="./images/fresh_goods_cover.png" alt="">
                        </a>
                    </div>
                    <div class="swiper-slide">
                        <a href="#">
                            <img src="./images/fresh_goods_2.jpg" alt="">
                        </a>
                    </div>
                </div>
            </div>
            <!-- Add Pagination 这个添加没有成功，因为样式中找不到（高为0）可能是没有素材的原因-->
            <div class="swiper-pagination"></div>
            <div class="swiper-button-next"></div>
            <div class="swiper-button-prev"></div>

    </section>

    </div>

    <!-- 引入swiper的js文件 -->
    <script src="./js/swiper.min.js"></script>
    <!-- 将复制的这个new存入立即执行函数，目的是控制变量作用域-->
    <script>
            (function () {
                var swiper = new Swiper('.swiper-container', {
                    slidesPerView: 3,
                    spaceBetween: 30,
                    centeredSlides: true,
                    loop: true,
                    pagination: {
                        el: '.swiper-pagination',
                        clickable: true,
                    },
                    navigation: {
                        nextEl: ".swiper-button-next",
                        prevEl: ".swiper-button-prev",
                    },
                });
            })()
    </script>

    <!-- 充电学习模块 -->

    <section class="content">
        <div class="con-hd">
            <h4>充电学习</h4>
            <a href="#">更多</a>
        </div>
        <div class="study">
            <!-- Swiper -->
            <div class="swiper mySwiper">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <a href="#">
                            <img src="./images/clothes_goods_4.jpg" alt="">
                        </a>
                    </div>
                    <div class="swiper-slide">
                        <a href="#">
                            <img src="./images/clothes_goods_5.jpg" alt="">
                        </a>
                    </div>
                    <div class="swiper-slide">
                        <a href="#">
                            <img src="./images/clothes_goods_cover.jpg" alt="">
                        </a>
                    </div>
                    <div class="swiper-slide">
                        <a href="#">
                            <img src="./images/tab_list2.png" alt="">
                        </a>
                    </div>
                    <div class="swiper-slide">
                        <a href="#">
                            <img src="./images/fresh_goods_cover.png" alt="">
                        </a>
                    </div>
                    <div class="swiper-slide">
                        <a href="#">
                            <img src="./images/avatar_1.png" alt="">
                        </a>
                    </div>
                    <div class="swiper-slide">
                        <a href="#">
                            <img src="./images/cenfang1.jpg" alt="">
                        </a>
                    </div>
                    <div class="swiper-slide">
                        <a href="#">
                            <img src="./images/clothes_goods_cover.jpg" alt="">
                        </a>
                    </div>
                    <div class="swiper-slide">
                        <a href="#">
                            <img src="./images/tab_list6.png" alt="">
                        </a>
                    </div>
                </div>
                <div class="swiper-pagination"></div>
            </div>
            <!-- Initialize Swiper -->
            <script>
                var swiper = new Swiper(".mySwiper", {
                    slidesPerView: 2.5,
                    spaceBetween: 30,
                    pagination: {
                        el: ".swiper-pagination",
                        clickable: true,
                    },
                });
            </script>
        </div>
    </section>
    <footer class="footer">
        <a href="#">
            <img src="./images/tecolog.png" alt="">
            <span>首页</span>
        </a>
        <a href="#">
            <img src="./images/tecolog2.png" alt="">
            <span>技术面试</span>
        </a>
        <a href="#">
            <img src="./images/pen.png" alt="">
            <span>模拟面试</span>
        </a>
        <a href="#">
            <img src="./images/text.png" alt="">
            <span>我的主页</span>
        </a>
    </footer>
    <script src="./js/flexible.js"></script>
    <!--这个文件没有下载到，但按要求要引入。以后找机会下载-->
</body>

</html>